<template>
    <div  class="app-container">
        <ccMeMobile v-if="$store.state.mobile.userAgent==='mobile'" class="mobileDetail"></ccMeMobile>
        <div v-else>
             <div style="marginBottom: 20px">
                <el-input v-model="searchText" placeholder="请输入要查询的关键字" size="small" style="width: 200px">
                </el-input>
                <el-button style="marginLeft: 10px" type="primary" size="small" @click="searchChange">搜索</el-button>
                <el-button style="marginLeft: 10px"  size="small" @click="reset">重置</el-button>
                <div style="float: right">
                    <el-button size="small" @click="multiDel" :disabled="selectionLength===0">批量删除</el-button>
                </div>
            </div>
             <el-table ref="multipleTable" :data="tableData" stripe style="width: 100%; marginBottom: 20px" size="small"
                    @selection-change="handleSelectionChange" v-loading="tableLoading" class="tableInfo" row-key="formId">
                    <el-table-column type="selection" width="80" align="center" :reserve-selection="true">
                    </el-table-column>
                    <el-table-column label="序号" width="80" align="center">
                        <template slot-scope="scope">
                            <span>{{
                                scope.$index + (page.pageNo - 1) * page.pageSize + 1
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="taskName" label="任务名称" align="center">
                    </el-table-column>
                    <el-table-column prop="processDefinitionName" label="所属流程" align="center">
                    </el-table-column>
                    <el-table-column prop="taskName" label="查阅节点" align="center">
                    </el-table-column>
                    <el-table-column prop="reason" label="审批意见" align="center">
                    </el-table-column>
                    <el-table-column prop="startUser" label="发起人" align="center">
                    </el-table-column>
                    <el-table-column prop="createTime" label="抄送时间" align="center">
                        <template slot-scope="scope">{{
                        getDateTime(scope.row.createTime)
                        }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope"> <!-- 关联流程之后 才有发起审批 -->
                            <el-button size="small" type="text" @click="viewData(scope.row)">查看</el-button>
                            <el-button size="small" type="text" style="color: red" @click="delData(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background :layout="layout" :total="pageTotal" :page-size="page.pageSize" :page-sizes="pageSizes"
                :current-page="page.pageNo" style="float: right;marginBottom: 20px" @size-change="sizeChange" @current-change="currentChange">
                </el-pagination>
        </div>
    </div>
</template>

<script>
import { getCarbonList, checkCarbonList, delMultiCarbonList, delCarbonList} from '@/api/custom/message'
import ccMeMobile from '@/views/custom/mobiledesign/mobileComponents/ccMeMobile.vue'
import { getProcessDetailPath } from "@/utils/micro";
import { reorganizationParam } from '@/utils/index'
export default {
    data() {
        return {
            searchFormData: {},
            tableLoading: false,
            searchText: "", //关键字搜索
            tableData: [],
            layout: "prev, pager, next,sizes,jumper", //分页显示布局
            pageSizes: [10, 20, 30, 50], //分页显示每页条数选择
            pageTotal: 3,
            page: {
                pageNo: 1, // 当前页数
                pageSize: 10, // 每页显示多少条
            },
            multipleSelection: [],
        }
    },
    components: {
        ccMeMobile
    },
    mounted() {
        this.getList()
    },
    computed: {
      selectionLength() {
        return this.multipleSelection.length
      }
    },
    methods: {
        getList() {
            this.tableLoading = true;
            let params = {
                ...this.page,
                name: this.searchFormData.name,
            };
            getCarbonList(params)
            .then((res) => {
                if (res.code === 0) {
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                    this.tableLoading = false;
                }
            })
            .catch((e) => {
                this.tableLoading = false;
            });
        },
        //搜索
        searchChange() {
            this.searchFormData = reorganizationParam({name: this.searchText})
            this.page.pageNo = 1;
            this.getList();
        },
        reset() {
            this.searchFormData={}
            this.searchText = '';
            this.searchChange();
        },
         sizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.page.pageNo = 1;
            this.getList();
        },
        currentChange(current) {
            this.page.pageNo = current;
            this.getList();
        },
        //时间戳转日期时间
        getDateTime(time) {
            if (!time) return ''
            let date = new Date(time)
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            let hour = date.getHours()
            let minute = date.getMinutes()
            let second = date.getSeconds()
            return `${year}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`
        },
        delData(row) {
            let ids = []
            ids.push(row.id)
            const that = this;
            this.$modal.confirm('是否删除该抄送信息！').then(function() {
                delCarbonList(row.id).then(response => {
                    that.$modal.msgSuccess("删除成功");
                    that.getList();
                })
            }).catch(() => {});
        },
        //多选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        //批量删除数据
        multiDel() {
            const that = this;
            if(that.multipleSelection.length > 0){
                that.$modal.confirm('是否确定删除选中的数据！').then(function() {
                    let data = []
                    that.multipleSelection.map((item) => {
                        data.push(item.id)
                    })
                    delMultiCarbonList(data).then((res) => {
                        if (res.code === 0) {
                            that.$message.success('删除成功')
                            that.multipleSelection = []
                            that.tableLoading = true
                            that.page.pageNo = 1
                            that.$refs.multipleTable.clearSelection()
                            that.getList()
                        }
                    })
                }).catch(() => {});
            }else{
                this.$message({
                    message: '请先选择要删除的数据!',
                    type: 'warning'
                });
            }
          
        },
        viewData(row) { // 查看  抄送人的流程
            checkCarbonList(row.id).then((res) => {
                this.$router.push({ path: getProcessDetailPath(), query: { id: row.processInstanceId, details: 'details',tableId:row.formRecordId,path:this.$route.path}});
            })
        }
    }
}
</script>
<style scoped>
    .mobileDetail{
        padding:10px;
        font-size: 14px;
    }
</style>